<template>
  <el-collapse>
    <el-collapse-item
      v-for="groupFormWidget in groupFormWidgets"
      :key="groupFormWidget.groupName"
      :title="groupFormWidget.groupName"
      :name="groupFormWidget.groupName"
    >
    <draggable
      class="ex-form-draggable"
      item-key="name"
      :sort="false"
    >
      <template #item="{ element }">
        <div class="ex-drag-tainer">
          <el-icon class="ex-mgr-10" :size="20">
            <component :is="`ex-icon-${element.iconName}`" />
          </el-icon>
          {{ element.name }}
        </div>
      </template>
    </draggable>
    </el-collapse-item>
  </el-collapse>
</template>

<script lang="ts" setup>
import { groupFormWidgets } from './group-widget';

defineOptions({
  name: ComponentName.FORM_WIDGET,
});
</script>
